<template>
  <div class="goodslist">
     <div class="item-info" v-for="item in goodlist" :key="item.id">
      <img
        :src="item.img_url"
      />
      <h1 class="title">
        {{item.title}}
      </h1>
      <div class="prince-item">
        <div class="price">
          <span class="price-new">￥{{item.sell_price}}</span>
          <span class="price-old">￥{{item.market_price}}</span>
        </div>
        <div class="type-item">
          <span>热卖中</span>
          <span>剩余{{item.stock_quantity}}件</span>
        </div>
      </div>
    </div>
    <mt-button type="danger" size="large" style="margin:10px"  @click="getmore">加载更多</mt-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
        number : 1,
        goodlist : [],
        isendload : false
    };
  },
  created() {
      this.getgoods()
  },
  methods: {
      async getgoods(){
        const {data}  = await this.$http.get('/api/getgoods?pageindex='+this.number)
        if(data.status ==0 )  this.goodlist = this.goodlist.concat(data.message)
        if(data.message.length == 0 )  this.isendload = true
        this.goodlist.forEach(item=>{
            item.img_url = '//img13.360buyimg.com/n2/s308x308_jfs/t1/167729/28/5852/190943/601f7952Ece165b87/1b8e41fa8b2da2a1.jpg!q70.dpg'
        })
      },
      getmore(){
          if(isendload) return
          this.number++
          this.getgoods()
      }
  },
};
</script>
  
<style lang="scss" scoped>
.goodslist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 7px 0;
  .item-info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 49%;
    border: 1px solid #ccc;
    margin-top: 7px;
    padding: 2px;
    box-shadow: 0 0 7px #ccc;
    img {
      width: 100%;
      min-height: 170px;
    }
    .title {
      font-size: 14px;
    }
    .prince-item {
        padding: 2px;
        background-color: #e8e8e8;
      .price {
        .price-new {
          color: red;
          font-size: 14px;
          font-weight: bold;
          margin-right: 12px ;
        }
        .price-old {
          font-size: 12px;
          color:#777777;
          text-decoration:line-through;
        }
      }
      .type-item {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
         color:#777777;
      }
    }
  }
}
</style>